<template>
  <view
    class="filter-wrapper"
    :style="{
      height: height + 'rpx',
      top: top,
      'border-top': border ? '1rpx solid #f2f2f2' : 'none',
    }"
    @touchmove.stop.prevent="discard"
  >
    <view class="inner-wrapper" style="position: relative;">
      <view
        class="mask"
        :class="showMask ? 'show' : 'hide'"
        @tap="tapMask"
      ></view>
      <view class="navs">
        <view class="" @click="navClick(0)">
          <text class="btnClass">筛选条件</text>
          <image
            src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png"
            mode=""
            class="icon-triangle"
            v-if="actNav == 0"
          ></image>
          <image
            src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png"
            mode=""
            class="icon-triangle"
            v-else
          ></image>
        </view>
        <!-- 科室 -->
        <view class="" @click="navClick(1)">
          <text class="btnClass" :style="color ? styleColor : ''">
            {{ deptName }}
          </text>
          <image
            src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png"
            mode=""
            class="icon-triangle"
            v-if="actNav == 1"
          ></image>
          <image
            src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png"
            mode=""
            class="icon-triangle"
            v-else
          ></image>
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        class="popup"
        :class="popupShow ? 'popupShow' : ''"
      >
        <!-- <view>的订单多</view> -->
        <view
          class="item-opt"
          v-for="(item, index) in navData[actNav]"
          :key="index"
        >
          {{ item.text }}
        </view>
        <!-- 按钮 -->
        <view
          class=""
          style="display: flex; margin-top: 47rpx;"
          v-if="actNav == 0"
        >
          <button
            type="default"
            class="btno"
            :class="showMask ? 'show' : 'hide'"
            @click="closeCf"
          >
            重置
          </button>
          <button
            type="default"
            class="btns"
            :class="showMask ? 'show' : 'hide'"
            @click="close"
          >
            确定
          </button>
        </view>
        <view
          v-for="(item, index) in arr"
          :key="index"
          style="display: flex; position: relative; top: -320rpx; left: 30%;"
          v-if="actNav == 0"
        >
          <text
            class="mini-btn"
            :class="{ changeColor }"
            @click="checkTuwen(1)"
          >
            {{ item.one }}
          </text>
          <text
            class="mini-btn1"
            :class="{ changeColor1 }"
            @click="checkTuwen(2)"
          >
            {{ item.two }}
          </text>
          <text
            class="mini-btn2"
            :class="{ changeColor2 }"
            @click="checkTuwen(3)"
          >
            {{ item.three }}
          </text>
        </view>
        <view
          style="display: flex; position: relative; top: -285rpx; left: 30%;"
          v-if="actNav == 0"
        >
          <text class="mini-btno" :class="{ changeOne }" @click="checkFuwu(1)">
            不限
          </text>
          <text class="mini-btnt" :class="{ changeTwo }" @click="checkFuwu(2)">
            开通
          </text>
          <text
            class="mini-btnf"
            :class="{ changeThree }"
            @click="checkFuwu(3)"
          >
            未开通
          </text>
        </view>
        <!-- 科室筛选 -->
        <view class="container" v-if="actNav == 1">
          <view
            class=""
            style="
              margin: 40rpx 0;
              font-size: 30rpx;
              height: 40rpx;
              line-height: 5rpx;
              border-bottom: 1px solid #eee;
            "
            @click="doctorDepartments()"
          >
            全部科室
          </view>
          <view v-for="(ite, inde) in stateList" :key="inde">
            <view class="state" @click="operationList(ite.id, ite.name)">
              {{ ite.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getSyDoctorList, getAllStandardDept } from '@/api/user.js'
// import { getCurDateTime } from '@/libs/utils.js';
export default {
  props: {
    height: {
      type: Number,
      default: 108,
    },
    top: {
      type: String,
      default: 'calc(var(--window-statsu-bar) + 44px)',
    },
    border: {
      type: Boolean,
      default: false,
    },
    filterData: {
      //必填
      type: Array,
      default: () => {
        return []
      },
    },
    defaultIndex: {
      //默认选中条件索引,超出一类时必填
      type: Array,
      default: () => {
        return [0]
      },
    },
    condition: {
      type: Object,
      default: () => {
        return {}
      },
    },
    doctorSearch: {
      type: String,
      default: () => {
        return ''
      },
    },
    nowCount: {
      type: Number,
      default: () => {
        return 0
      },
    },
  },
  data() {
    return {
      navData: [],
      popupShow: false,
      showMask: false,
      actNav: null,
      // selDate: '选择日期',
      selIndex: [], //选中条件索引
      changeColor: true,
      changeColor1: false,
      changeColor2: false,
      changeOne: true,
      changeTwo: false,
      changeThree: false,
      changeType: '',
      arr: [
        {
          one: '不限',
          two: '开通',
          three: '未开通',
        },
      ],
      filter: '',
      conditionJs: {},
      stateList: [],
      toParentObj: {}, //传给父组件的数据
      deptName: '科室', //科室名称
      styleColor: 'color:#52D0BB',
      color: false,
    }
  },
  created() {
    this.doctorSearch = this.doctorSearch
    this.conditionJs = this.condition

    // console.log(this.condition, '接收的condition数据999--')
    this.navData = this.filterData
    this.selIndex = this.defaultIndex
    // this.keepStatus();
  },
  mounted() {
    // this.selDate = getCurDateTime().formatDate;
  },
  methods: {
    checkTuwen(type) {
      // type=1--不限 2--开通  3--未开通
      this.changeColor = false
      this.changeColor1 = false
      this.changeColor2 = false
      if (type == 1) {
        this.changeColor = true
        this.conditionJs.isOpen = ''
      } else if (type == 2) {
        this.changeColor1 = true
        this.conditionJs.isOpen = 0 //开通
      } else {
        this.changeColor2 = true
        this.conditionJs.isOpen = 1 //未开通
      }
    },
    getDocList() {
      let _this = this
      let nowCount = _this.nowCount
      let pageNum = _this.conditionJs.pageNum

      getSyDoctorList(_this.conditionJs)
        .then((res) => {
          this.doctorList = res.rows
          this.$emit('send', this.doctorList)
          this.conditionJs.pageNum = pageNum + 1
          this.nowCount = nowCount + res.rows.length
          this.tapMask() //关闭弹窗
        })
        .catch((err) => {
          console.log('错误#', err)
        })
    },
    doctorDepartment() {
      getAllStandardDept()
        .then((res) => {
          this.stateList = res.data
          console.log(this.stateList, '我是接口')
        })
        .catch((err) => {
          console.log('错误#', res)
        })
    },
    checkFuwu(type) {
      this.changeOne = false
      this.changeTwo = false
      this.changeThree = false
      if (type == 1) {
        this.changeType = '1'
        this.changeOne = true
        this.conditionJs.isFreeClinic = '' //开通
      } else if (type == 2) {
        this.changeType = '2'
        this.changeTwo = true
        this.conditionJs.isFreeClinic = 0 //开通
      } else {
        this.changeType = '3'
        this.changeThree = true
        this.conditionJs.isFreeClinic = 1 //未开通
      }
    },
    navClick(index) {
      if (index === this.actNav) {
        this.tapMask()
        return
      }
      this.popupShow = true
      this.showMask = true
      this.actNav = index
      if (index == 1) {
        this.doctorDepartment()
      }
    },
    dateClick() {
      this.tapMask()
    },
    tapMask() {
      this.showMask = false
      this.popupShow = false
      this.actNav = null
    },
    // 点击重置清空
    closeCf() {
      this.changeColor = true
      this.changeColor1 = false
      this.changeColor2 = false
      this.conditionJs.isOpen = ''
      this.changeOne = true
      this.changeTwo = false
      this.changeThree = false
      this.conditionJs.isFreeClinic = ''
    },
    // 点击确定关闭模态框
    close(type) {
      this.showMask = false
      this.popupShow = false
      this.actNav = null
      this.conditionJs.doctorName = this.doctorSearch
      // this.conditionJs.pageNum = 1
      this.$emit('handle', this.conditionJs)
      // this.getDocList()
      // this.$emit("getList", this.conditionJs)
    },
    handleDate(e) {
      let d = e.detail.value
      this.toParentObj.value = d
      this.$emit('dateChange', this.toParentObj)
    },
    discard() {},
    // 不限
    unlimited() {},
    // 科室筛选
    operationList(id, name) {
      this.toParentObj.deptId = id
      this.color = true
      this.$emit('dateChange', this.toParentObj)
      this.conditionJs.standardDeptId = id
      this.conditionJs.doctorName = this.doctorSearch

      this.conditionJs.pageNum = 1
      this.getDocList()
      this.deptName = name
      // this.showMask = false;
      // this.popupShow = false;
      // this.actNav = null;
    },
    // 全部科室
    doctorDepartments() {
    this.conditionJs.doctorName = this.doctorSearch

      this.$delete(this.conditionJs, 'standardDeptId')
      this.conditionJs.pageNum = 1
      this.getDocList()
      this.deptName = '全部科室'
      // this.showMask = false;
      // this.popupShow = false;
      // this.actNav = null;
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  font-size: 28rpx;
}

.c-flex-align {
  display: flex;
  align-items: center;
}

.c-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.filter-wrapper {
  // position: fixed;
  left: 0;
  width: 750rpx;
  z-index: 999;

  .inner-wrapper {
    .navs {
      position: fixed;
      width: 100%;
      height: 90rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 2rpx solid #f5f6f9;
      color: #000000;
      box-sizing: border-box;
      border: 1px solid #eeeeee;
      font-size: 15px;
      top: 170rpx;
      z-index: 999;

      & > view {
        flex: 1;
        height: 100%;
        flex-direction: row;
        z-index: 999;
      }

      .date {
        justify-content: flex-end;
      }

      .actNav {
        color: #4d7df9;
        font-weight: bold;
      }

      .btnClass {
        line-height: 88rpx;
        margin-left: 45rpx;
      }
    }

    .mask {
      z-index: 666;
      position: fixed;
      top: calc(var(--status-bar-height) + 63px);
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0);
      transition: background-color 0.15s linear;

      &.show {
        background-color: rgba(0, 0, 0, 0.4);
      }

      &.hide {
        display: none;
      }
    }

    .popup {
      position: fixed;
      height: 340rpx;
      background-color: #fff;
      overflow: scroll;
      z-index: 999;
      transition: all 1s linear;
      opacity: 0;
      display: none;
      font-size: 13px;
      margin-top: 261rpx;

      .item-opt {
        height: 100rpx;
        line-height: 100rpx;
        padding: 0 40rpx;
        color: #8b9aae;
        border-bottom: 2rpx solid #f5f6f9;
      }

      .actOpt {
        color: #4d7df9;
        font-weight: bold;
        position: relative;

        &::after {
          content: '✓';
          font-weight: bold;
          font-size: 36rpx;
          position: absolute;
          right: 40rpx;
        }
      }
    }

    .popupShow {
      display: block;
      opacity: 1;
    }
  }

  .icon-triangle {
    width: 16rpx;
    height: 16rpx;
    margin-left: 10rpx;
  }

  .mini-btn {
    width: 120rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
  }

  .changeColor {
    color: #fff;
    background-color: #52d0bb;
  }

  .changeColor1 {
    color: #fff;
    background-color: #52d0bb;
  }

  .changeColor2 {
    color: #fff;
    background-color: #52d0bb;
  }

  .mini-btn1 {
    width: 120rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
    margin-left: 20rpx;
  }

  .mini-btn2 {
    width: 120rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
    margin-left: 20rpx;
  }

  .mini-btno {
    width: 120rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
  }

  .mini-btnt {
    width: 120rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
    margin-left: 20rpx;
  }

  .mini-btnf {
    width: 170rpx;
    display: block;
    line-height: 65rpx;
    height: 65rpx;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    font-size: 12px;
    margin-left: 20rpx;
  }

  .changeOne {
    color: #fff;
    background-color: #52d0bb;
  }

  .changeTwo {
    color: #fff;
    background-color: #52d0bb;
  }

  .changeThree {
    color: #fff;
    background-color: #52d0bb;
  }

  .btno {
    width: 50%;
    height: 44px;
    background-color: #fff;
    text-align: center;
    font-size: 15px;
  }

  .btns {
    width: 50%;
    height: 44px;
    text-align: center;
    color: #ffffff;
    background-color: #52d0bb;
    font-size: 15px;
  }

  .container {
    text-align: center;
    // margin: 20rpx 0;

    .state {
      margin: 40rpx 0;
      font-size: 30rpx;
      height: 40rpx;
      line-height: 5rpx;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
